<template>
  <v-chart
    class="chart"
    :option="option"
    autoresize
    style="width: 100%; height: 300px"
  />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineExpose, defineProps } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

const option = ref({
  grid: {
    left: "5%",
    right: "5%",
    bottom: "0%",
    top: "0%",
    containLabel: true,
  },
  backgroundColor: "#05405c",
  title: {
    text: "标题",
    left: "center",
    top: 5,
  },
  tooltip: {
    trigger: "item",
    formatter: "{b} : {c} ({d}%)",
  },
  backgroundColor: "#ffffff",

  legend: {
    top: "40%",
    left: "right",
    type: "scroll",
    orient: "vertical",
  },
  series: [
    {
      name: "",
      type: "pie",
      radius: ["45%", "75%"],

      center: ["40%", "55%"],
      data: [
        { value: 0, name: "低" },
        { value: 0, name: "一般" },
        { value: 0, name: "较大" },
        { value: 0, name: "重大" },
      ],
      labelLine: {
        show: false,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});

const setData = (data) => {
  option.value = {
    grid: {
      left: "0%",
      right: "0%",
      bottom: "0%",
      top: "0%",
      containLabel: true,
    },
    backgroundColor: "#05405c",
    title: {
      text: data.title,
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)",
    },
    backgroundColor: "#ffffff",
    legend: {
      top: "40%",
      left: "right",
      type: "scroll",
      orient: "vertical",
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["50%", "70%"],
        center: ["40%", "50%"],
        // label: {
        //   normal: {
        //     show: true,
        //     position: "center",
        //     color: "#4c4a4a",
        //     formatter:
        //       "总量" + "\n\r" +  data.total,
        //       // "{active|任务总数}" + "\n\r" + "{total|" + data.total + "}",
        //     // rich: {
        //     //   total: {
        //     //     fontSize: 25,
        //     //     fontFamily: "微软雅黑",
        //     //     color: "#454c5c",
        //     //   },
        //     //   active: {
        //     //     fontFamily: "微软雅黑",
        //     //     fontSize: 16,
        //     //     color: "#6c7a89",
        //     //     lineHeight: 30,
        //     //   },
        //     // },
        //   },
        //   // emphasis: {
        //   //   //中间文字显示
        //   //   show: data.center,
        //   // },
        // },
        data: data.data,
        labelLine: {
          show: true,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
};
defineExpose({
  setData,
});
</script>

<style scoped>
.chart {
  height: 100%;
}
</style>
